<template>
    <div
        class="a-control-group"
        :class="[`direction-${direction}`, withSpace ? 'with-space' : '']"
        :style="[block ? 'display: flex' : 'display: inline-flex']"
    >
        <slot></slot>
    </div>
</template>

<style lang="scss">
@import "../scss/vars";
.a-control-group {
    &.direction-h {
        & > *:not(:last-child):not(.sharp) {
            border-top-right-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }
        & > *:not(:first-child):not(.sharp) {
            border-top-left-radius: unset !important;
            border-bottom-left-radius: unset !important;
        }

        & > .a-control-group:not(:last-child) > *:not(.sharp) {
            border-top-right-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }
        & > .a-control-group:not(:first-child) > *:not(.sharp) {
            border-top-left-radius: unset !important;
            border-bottom-left-radius: unset !important;
        }

        &.with-space > *:not(:last-child) {
            margin-right: 1px;
        }
    }
    &.direction-v {
        flex-direction: column;

        & > *:not(:last-child):not(.sharp) {
            border-bottom-left-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }
        & > *:not(:first-child):not(.sharp) {
            border-top-left-radius: unset !important;
            border-top-right-radius: unset !important;
        }

        & > .a-control-group:not(:last-child) > *:not(.sharp) {
            border-bottom-left-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }
        & > .a-control-group:not(:first-child) > *:not(.sharp) {
            border-top-left-radius: unset !important;
            border-top-right-radius: unset !important;
        }

        &.with-space > *:not(:last-child) {
            margin-bottom: 1px;
        }
    }
}
</style>

<script>
export default {
    props: {
        direction: {
            type: String,
            default: 'h',
        },
        /**
         * 是否是块级元素，默认为false，即行内元素，样式为inline-flex，如果block为true，则样式为flex
         */
        block: {
            type: Boolean,
            default: false,
        },
        /**
         * 组件间是否有间隔
         */
        withSpace: {
            type: Boolean,
            default: false,
        },
    },
};
</script>